<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理主页</title>
    <link rel="stylesheet" href="css/manage.css">
    <script src="js/jquery.js"></script>
    <script src="js/vue-router.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-container>
                <el-aside width="200px">
                    <el-row class="tac">
                        <el-col>
                            <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64"
                                text-color="#fff" active-text-color="#ffd04b">
                                <el-submenu index="1">
                                    <template slot="title">
                                        <i class="el-icon-user"></i>
                                        <span>用户管理</span>
                                    </template>
                                    <el-menu-item @click="toPage('/manager_list.html')" index="1-1">用户列表</el-menu-item>
                                </el-submenu>
                                <el-submenu index="2">
                                    <template slot="title">
                                        <i class="el-icon-s-platform"></i>
                                        <span>设备管理</span>
                                    </template>
                                    <el-menu-item @click="toPage('/equip_list.html')" index="2-1">设备列表</el-menu-item>
                                </el-submenu>
                                <el-submenu index="3">
                                    <template slot="title">
                                        <i class="el-icon-s-platform"></i>
                                        <span>数据管理</span>
                                    </template>
                                    <el-menu-item @click="toPage('/data_list.html')" index="3-1">数据列表</el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main>
                    <iframe style="width: 100%;height:800px;border: none;" scrolling="no"
                        class="manager_iframe"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <script src="js/manager_index.js"></script>
</body>

</html>